<!--全文检索查询-->
<template>
  <div class="full-search">
    <splitpanes horizontal>
      <pane>
        <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)', padding: '12px 12px 0' }">
          <div slot="title">
            <div class="top-icon">
              <icon-font type="icon-sousuo1" />
            </div>
            <span>全文检索查询</span>
          </div>
          <div slot="extra">
            <a-input-search placeholder="请输入内容" enter-button />
          </div>
          <el-table
            :data="fullTableData"
            highlight-current-row
            @row-dblclick="rowdblClick"
            border
            height="calc(100% - 40px)"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <slot v-for="(item,index) in fullColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
            <el-table-column label="操作">
              <template>
                <a-button type="link">打开PDF</a-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <a-pagination :default-current="4" :total="50" show-less-items />
          </div>
        </a-card>
      </pane>
      <pane>
        <a-card size="small" :body-style="{ height: '100%' }">
          <div class="left-tab">
            <div class="left-title">档案</div>
            <div class="left-content">
              <a-tree
                show-line
                :treeData="treeData"
                defaultExpandAll>
              </a-tree>
            </div>
          </div>
          <el-table
            :data="tabTableData"
            highlight-current-row
            border
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 80%; float: left;">
            <slot v-for="(item,index) in tabColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
            <el-table-column label="操作">
              <template>
                <a-button type="link">打开PDF</a-button>
              </template>
            </el-table-column>
          </el-table>
        </a-card>
      </pane>
    </splitpanes>

    <a-drawer
      title="PDF文档"
      placement="left"
      :closable="false"
      :visible="drawer"
      @close="onClose"
      width="40%">
      <p>PDF文档</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    Splitpanes,
    Pane
  },
  data () {
    return {
      drawer: false,
      fullTableData: [
        {
          Name: 'A9研发计划内容.doc',
          Type: 'PDF',
          PageCount: '20',
          Size: '14848',
          Content: ''
        }
      ],
      fullColumns: [
        {
          title: '文件名',
          field: 'Name'
        },
        {
          title: '类型',
          field: 'Type'
        },
        {
          title: '所在页数',
          field: 'PageCount'
        },
        {
          title: '文件大小（MB）',
          field: 'Size'
        },
        {
          title: '检索内容',
          field: 'Content'
        }
      ],
      treeData: [
        {
          title: '2020-1-001 测试数据',
          key: 1
        }
      ],
      tabTableData: [
        {
          Name: '2020578.jpg',
          Size: '1068492',
          Type: 'img'
        },
        {
          Name: 'nginx.conf',
          Size: '2338',
          Type: 'PDF'
        },
        {
          Name: '34.pdf',
          Size: '423921',
          Type: 'PDF'
        }
      ],
      tabColumns: [
        {
          title: '文件名',
          field: 'Name'
        },
        {
          title: '文件大小（MB）',
          field: 'Size'
        },
        {
          title: '文件类型',
          field: 'Type'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    rowdblClick () {
      this.drawer = true
    },
    onClose () {
      this.drawer = false
    }
  }
}
</script>
<style lang="less" scoped>
.full-search {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-head {
      .ant-card-extra {
        width: 50%;
      }
    }
    /deep/ .ant-card-body {
      .pagination {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .left-tab {
        width: 20%;
        height: 100%;
        float: left;
        border: 1px solid #EBEEF5;
        display: flex;
        flex-direction: column;
        .left-title {
          width: 100%;
          height: 40px;
          color: #666;
          background-color: #F5F7FA;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          border-bottom: 1px solid #E4E7ED;
        }
        .left-content {
          overflow: auto;
          flex: 1;
          padding: 10px;
        }
      }
    }
  }
}
</style>
